<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>列表实现图片排序</title>
		<style type="text/css">
			ul
			{
				list-style-type:none;
				width:600px;
				margin: 0 auto;
				border: 1px solid blueviolet;
				height: 138px;
				padding: 12px 0px 0px 12px;
			}
			ul li
			{
				float: left;
				border:1px dashed forestgreen;
				margin:0 12px 12px 0px;
				text-align:center;
				width:120px;
			}
			ul li span{
				display: block;
			}
				

		</style>
	</head>
	<body>
		<ul>
			<li><img src="120.jpg"><span>图片一介绍</span></li>
			<li><img src="1201.jpg"><span>图片二介绍</span></li>
			<li><img src="1204.jpg"><span>图片三介绍</span></li>
			<li><img src="1202.jpg"><span>图片四介绍</span></li>
		</ul>
	</body>
</html>